<!DOCTYPE html>
<html>
<script src="js/g.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html, body {
            /*background-color: #25272b;*/
            /*background-image: url(body3.jpg);*/
            background-position: 0px 0px;
            background-attachment: fixed;
            /*background-repeat: no-repeat;*/
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -webkit-background-size: auto;
            color: #fff;
            font-family: helvetica, arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 12pt
        }

        #canvas {
            border: 1px solid #555;
            position: absolute;
            left: 0;
            top: 0;
            /*background-color: #000*/
        }

        #canvas {
            border: 1px solid #555;
            position: absolute;
            left: 0;
            top: 0;
            /*background-color: #000*/
        }

        #game {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 460px;
            height: 640px
        }
    </style>
</head>
<body>
<div id="game">
    <canvas id="canvas" style="cursor: auto;" height="640" width="460">
    </canvas>
</div>
<canvas id="canvas2" style="cursor: auto;" height="100" width="400">
</canvas>
<font color="red">
    <div id="displayInfo" style="width: 200px; height: 50px;z-index: 3;position: absolute;top: 200px;left: 200px;background-color: gray;font-family: fantasy;">
    </div>
</font>
</body>
<script>
    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');

    var c2 = document.getElementById('canvas2');
    var ctx2 = c.getContext('2d');

    var fonth = 26;

    function getImgDataByTxt(word) {

        ctx2.font = fonth + "px Verdana";
//        var txt = "helloyg全国Lli";
        var txt = word;

        ctx2.fillStyle = 'gray';
        ctx2.fillRect(50, fonth, ctx2.measureText(txt).width, fonth);
        ctx2.fillStyle = 'red';
        ctx2.textAlign = "start";
        ctx2.textBaseline = "hanging";
        ctx2.fillText(txt, 50, fonth);
        var imgdata = ctx2.getImageData(50, fonth, ctx2.measureText(txt).width, fonth);
        return imgdata;
    }

    function drawObj(f, charsImgdataArr, word) {
        var x = 150;
        var y = 0;
        var w = 0;
        var h = fonth;
        for (i in charsImgdataArr) {
            w += charsImgdataArr[i].width;
        }

//        alert(w);
//        alert(h);

        setInterval(function () {
            ctx.clearRect(x, y, w, h);

            //飞机抵达左右边框时，改变飞机横向移动的方向
            if (x > c.width - 20 || x < 20) {
                f *= -1;
            }
            //随机改变飞机的横向移动方向
            if (x % 20 === 0 && Math.ceil(Math.random() * 100) > 70) {
                f *= -1;
            }
            x = x + f * 3;
            y = y + 3;
            //飞机抵达底部时,移除该飞机对象
            if (y > c.height - 200) {
                delete wordsDisplay[word];
                ctx.clearRect(x, y, w, h);
                y = 0;
            } else {
                for (i in charsImgdataArr) {
//                    console.log(charsImgdataArr[i].width + "  " + word.split("")[i]);
                    ctx.putImageData(charsImgdataArr[i], x + i * charsImgdataArr[i].width, y);
                }
                wordsDisplay[word] = {"x": x, "y": y};
            }
        }, 500);
    }

    setInterval(function () {
        var f = 1;//方向
        var randomValue = Math.ceil(Math.random() * 100);
        if (randomValue > 50) {
            f = -1
        } else {
            f = 1;
        }
        var word = wordGen();
        $('#displayInfo').html(word);
        var chars = word.split("");
        var charsImgdataArr = [];
        for (i in chars) {
            charsImgdataArr.push(getImgDataByTxt(chars[i]));
        }

        drawObj(f, charsImgdataArr, word);
    }, 3000);

</script>
</html>